// 放置目标,接收拖动组件
import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';

/**
 * 一个普通的JavaScript对象，上面有一些允许的方法。它描述了放置目标如何对拖放事件做出反应。
 */
const squareTarget = {
  drop(_, monitor, component) {
    const item = monitor.getItem();
    const items = component.state.items;
    items.push(item);
    component.setState({ items });
  },
};

/**
 * 收集功能。它应该返回一个普通的道具对象注入你的组件。它接收两个参数：connect 和 monitor。
 * @param {*} connect
 * @returns
 */
function collect(connect) {
  return {
    connectDropTarget: connect.dropTarget(),
  };
}

class DropTargetElement extends Component {
  state = {
    items: [],
  };

  render() {
    const { connectDropTarget } = this.props;

    return connectDropTarget(
      <div
        style={{
          width: 500,
          backgroundColor: 'rgba(150, 150, 150, 0.1)',
          height: 500,
        }}
      >
        {this.state.items.map((item, index) => (
          <h5 key={index}>{item.name}</h5>
        ))}
      </div>,
    );
  }
}

/**
 * type: 必填。字符串，ES6符号或返回给定组件的函数props。此放置目标仅对指定类型的 drag sources 项目做出反应
 * spec：必填。一个普通的JavaScript对象，上面有一些允许的方法。它描述了放置目标如何对拖放事件做出反应。
 * collect：必填。收集功能。它应该返回一个普通的道具对象注入你的组件。它接收两个参数：connect 和 monitor。
 */
export default DropTarget('box', squareTarget, collect)(DropTargetElement);
